//  获取分类，处理下拉框 
$.ajax({
    url: '/my/category/list',
    success: function(res) {
        // console.log(res);
        if (res.status === 0) {
            let str = ''
            res.data.forEach(item => {
                str += `<option value="${item.id}">${item.name}</option>`
            })
            $('select[name=cate_id]').append(str)
                // 动态创建的 下拉框、单项按钮、复选按钮，需要更新渲染
            let form = layui.form
                // form.render('select', '表单的lay-filter属性的值');
            form.render('select')
        }
    }
})


initEditor()


// 封面图片处理 
// 初始化剪裁框
let image = $('#image')
let option = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
}
image.cropper(option)


// 点击 上传 能够触发文件域的单击事件 
// button:contains("标签的内容") 查找包含“内容”的标签
$('button:contains("选择封面")').on('click', function() {
    $('#file').trigger('click')
})

// 更换剪裁区的图片 
$('#file').on('change', function() {
    // console.dir(this);
    if (this.files.length > 0) {
        let fileObj = this.files[0]
        let url = URL.createObjectURL(fileObj)
        image.cropper('replace', url)
    }
})



$('form').on('submit', function(e) {
    e.preventDefault()
    let fd = new FormData(this)
    fd.set('content', tinyMCE.activeEditor.getContent())

    // 剪裁图片，把剪裁后的结果加到fd中
    let canvas = image.cropper('getCroppedCanvas', { width: 400, height: 280 })

    canvas.toBlob(function(blob) {

        fd.append('cover_img', blob)

        $.ajax({
            url: '/my/article/add',
            type: 'POST',
            data: fd,
            contentType: false,
            processData: false,
            success: function(res) {
                // console.log(res);
                if (res.status === 0) {
                    layer.msg(res.message, { time: 1500 }, function() {
                        location.href = './list.html'
                    })
                }
            }
        })
    })


})